<template>
	<view>
		<view class="mx-1">
			<uni-easyinput prefixIcon="search" v-model="searchvalue" placeholder="请输入搜索内容" @iconClick="iconClick"
				@blur="blurSearch">
			</uni-easyinput>
		</view>
		<view class="hot-search">
			<one-adv title="热门搜索" cover="../../static/images/demo/demo4.jpg">
				<color-tag v-for="(item,index) in hot" :key="index" :item="item" :color="true" @click.native="inputSearch(item)"></color-tag>
			</one-adv>
		</view>
		<view class="cate-search">
			<one-adv title="常用分类">
				<color-tag v-for="(item,index) in cate" :key="index" :item="item" :color="false" @click.native="inputSearch(item)"></color-tag>
			</one-adv>
		</view>
		<view class="history-search">
			<one-adv title="历史记录" cover="../../static/images/demo/del.png" :del="true" @clearHistory="clearHistoryList">
				<color-tag v-for="(item,i) in historyList" :key="i" :item="{name:item}" :color="false"
					@longpress="longPress(i)" @click.native="inputSearch(item)">
					<icon type="clear" size="16" v-if="currentIndex == i&isShow" class="position-absolute clear-icon"
						@click="removeItem(i)" />
				</color-tag>
			</one-adv>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 0,
				isShow: false,
				historyList: [],
				searchvalue: '',
				hot: [{
						name: '领券中心'
					},
					{
						name: 'Redmi K20'
					},
					{
						name: 'RedmiBook 14'
					},
					{
						name: '智能积木 越野四驱车'
					},
					{
						name: '手环 腕带'
					},
				],
				cate: [{

						name: '耳机'
					},
					{
						name: '手机'
					},
					{
						name: '音箱'
					},
					{
						name: '手表'
					},
					{
						name: '配件'
					},
					{
						name: '网关/传感器'
					},
					{
						name: '健康'
					},
					{
						name: '酷玩'
					},
				]
			}
		},
		mounted() {
			const value = uni.getStorageSync('history_key');
			if (value) {
				this.historyList = value
			}
		},
		methods: {
			longPress(index) {
				this.currentIndex = index;
				this.isShow = true
			},
			removeItem(i) {
				this.historyList.splice(i, 1)
				uni.setStorageSync('history_key', this.historyList);
				this.isShow = false
			},
			clearHistoryList() {
				uni.showModal({
					title: '提示',
					content: '您确定要全部删除吗',
					success: (res) => {
						if (res.confirm) {
							this.historyList = []
							uni.removeStorageSync('history_key');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			inputSearch(item){
				if(item.name){
					this.searchvalue=item.name
				}else{
					this.searchvalue=item
				}
			},
			//点击左侧图标
			iconClick() {
				let index = this.historyList.indexOf(this.searchvalue)
				if (index == -1) {
					//原来的historyList是空的或者有东西但是搜索的时候不是原来的某个数据
					this.historyList.unshift(this.searchvalue)
					uni.setStorageSync('history_key', this.historyList);
				} else {
					//historyList里面有东西但是有重复搜索了
					this.historyList.splice(index, 1)
					this.historyList.unshift(this.searchvalue)
					uni.setStorageSync('history_key', this.historyList);
				}
				uni.navigateTo({
					url: `/pages/choose/choose?key=${this.searchvalue}`
				})
			},

			// filter方案（仅作对比）
			// iconClick() {
			//     if (!this.searchvalue.trim()) return // 过滤空内容
			//     this.historyList = [
			//         this.searchvalue,
			//         ...this.historyList.filter(item => item !== this.searchvalue)
			//     ]
			//     uni.setStorageSync('history_key', this.historyList)
			//     // uni.navigateTo({ url: `/pages/choose/choose?key=${this.searchvalue}` })
			// },

			//  Set 方案（仅作对比）
			// iconClick() {
			//     const set = new Set([this.searchvalue, ...this.historyList])
			//     this.historyList = Array.from(set).slice(0, 10) // 限制历史记录数量（如最多10条）,缺点是：无法保证最新记录在前
			//     uni.setStorageSync('history_key', this.historyList)
			// },

			// 失去焦点清除空格
			blurSearch() {
				this.searchvalue = this.searchvalue.trim()
			}

		}
	}
</script>

<style scoped>
	.uni-mt-5 {
		margin-top: 5px;
	}

	.clear-icon {
		top: 0;
		right: 0;
	}
</style>